<template>
	<view class="preferences">
		<view class="preferences__top">
			<image :src="`${$ImgBaseUrl}bg.png`" class="preferences__top__bg"></image>
			<text>请选择您关注的服务</text>
		</view>
		<view class="preferences__bottom">
			<view class="preferences__bottom__content">
				<uni-data-checkbox class="preferences__bottom__content__item" multiple mode="tag" v-model="value"
					:map="{text: 'name', value: 'id'}" :localdata="range"></uni-data-checkbox>
			</view>
			<view class="preferences__bottom__btn" @click="savePreferences">选好了</view>
		</view>
	</view>
</template>
<script setup>
	import {
		businessList,
		userBindBusiness,
		userInfo
	} from '@/api/user.js'
	import {
		reactive,
		toRefs,
		onMounted
	} from 'vue';
	const state = reactive({
		range: [],
		value: [],
	});
	const {
		range,
		value
	} = toRefs(state);
	const getPreferences = () => {
		businessList().then(res => {
			if (res.code === 200) {
				range.value = res.data
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			}
		})
	};
	// 服务绑定页（第一个组件）的 savePreferences 方法
	const savePreferences = () => {
		userBindBusiness(value.value).then(res => {
			if (res.code === 200) {
				uni.showToast({
					icon: 'none',
					title: '保存成功'
				});

				// 关键：存储“已完成服务绑定”的状态到本地
				uni.setStorageSync('hasBindBusiness', true);

				uni.redirectTo({
					url: '/pages/index/index'
				}); // 跳转到首页
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg
				});
			}
		}, err => {
			uni.showToast({
				icon: 'none',
				title: '保存失败'
			});
		})
	};
	onMounted(() => {
		getPreferences();
	})
</script>
<style lang="scss">
	.preferences {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;

		&__top {
			position: relative;

			&__bg {
				width: 100%;
				height: 704rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			text {
				position: absolute;
				width: 100%;
				text-align: center;
				top: 32rpx;
				font-size: 50rpx;
				color: #333333;
				font-weight: 600;
			}
		}

		&__bottom {
			padding: 816rpx 25rpx 166rpx;

			&__content {
				.uni-data-checklist .checklist-group .checklist-box.is--tag {
					// width: 29%;
					background: #F0F0F0;
					border-radius: 44rpx;
					padding: 24rpx 70rpx;
					border: none;
					margin-right: 30rpx;
					font-size: 28rpx;
					color: #333333;
				}

				.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked {
					background: #2F80ED;
					border: none;
					font-size: 28rpx;
					color: #fff;
				}

				.uni-data-checklist .checklist-group .checklist-box .checklist-content {
					justify-content: center;
				}
			}

			&__btn {
				width: 90%;
				margin: 154rpx auto;
				padding: 23rpx 0;
				background: #2F80ED;
				border-radius: 44rpx;
				font-weight: 600;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>